<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Text Rendering</title>
<style>
    #editableDiv {
        opacity: 0; /* 使div不可见但仍然可以接收输入 */
        position: absolute; /* 避免占用页面空间 */
        top: -100;
        left: -1000;
        width: 110px; /* 最小化可编辑区域的尺寸 */
        height: 10px; /* 最小化可编辑区域的尺寸 */
        overflow: hidden; /* 避免滚动条出现 */
    }
</style>
</head>
<body>

<div id="editableDiv" contenteditable="true"></div>
<canvas id="canvas" width="600" height="400" style="border:1px solid #000;"></canvas>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var editableDiv = document.getElementById('editableDiv');

    // 定义文本数据
    var textData = {
        text: "您好中国！",
        styles: [
            { start: 0, end: 2, font: "30px 黑体", color: "red" },
            { start: 2, end: 6, font: "45px 楷体", color: "green" }
        ]
    };

    // 渲染分段文本
    function renderText() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
        let x = 10; // 初始 x 坐标
        let y = 50; // 初始 y 坐标

        // 遍历文本数据
        for (let i = 0; i < textData.styles.length; i++) {
            const style = textData.styles[i];
            const textSegment = textData.text.slice(style.start, style.end);

            // 设置字体和颜色
            ctx.font = style.font;
            ctx.fillStyle = style.color;

            // 渲染文本
            ctx.fillText(textSegment, x, y);

            // 更新 x 坐标
            x += ctx.measureText(textSegment).width;
        }
    }

    // 初始化渲染
    renderText();

    // 点击画布时聚焦到可编辑区域
    canvas.addEventListener('click', function() {
        editableDiv.focus();
    });

    // 处理输入事件
    editableDiv.addEventListener('input', function() {
        // 更新文本数据
        textData.text = editableDiv.innerText;

        // 重新渲染文本
        renderText();
    });

    // 处理compositionstart事件
    editableDiv.addEventListener('compositionstart', function() {
        console.log('compositionstart');
    });

    // 处理compositionupdate事件
    editableDiv.addEventListener('compositionupdate', function(e) {
        console.log('compositionupdate');
    });

    // 处理compositionend事件
    editableDiv.addEventListener('compositionend', function() {
        console.log('compositionend');
    });
});
</script>

</body>
</html>